@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* 全局样式 */
:root {
  --pixel-primary: #00A891;
  --pixel-secondary: #6B7280;
  --pixel-success: #10B981;
  --pixel-warning: #F59E0B;
  --pixel-danger: #EF4444;
  --pixel-info: #3B82F6;
  --pixel-sakura: #E956AE;
  --pixel-dark: #1F2937;
  --pixel-light: #F9FAFB;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Press Start 2P', 'Courier New', monospace;
  background-color: var(--pixel-light);
  color: var(--pixel-dark);
  line-height: 1.6;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 自定义像素化样式 */
.pixel-border {
  border: 3px solid var(--pixel-primary);
  box-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.8),
    8px 8px 0 rgba(0, 0, 0, 0.4);
}

.pixel-shadow {
  box-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.8),
    8px 8px 0 rgba(0, 0, 0, 0.4);
}

/* 动画效果 */
@keyframes pixelPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes pixelFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes pixelBlink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.3; }
}

/* 响应式设计 */
@media (max-width: 768px) {
  body {
    font-size: 12px;
  }

  .pixel-border {
    border-width: 2px;
    box-shadow:
      2px 2px 0 rgba(0, 0, 0, 0.8),
      4px 4px 0 rgba(0, 0, 0, 0.4);
  }
}